<template>
    <div id="gather">
        <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
            <el-form :inline="true" :model="ActData">
                <el-form-item>
                    <el-button type="primary" @click="getAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-table ref="multipleTable" v-loading="listLoading" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="albumId" label="专辑ID" width="120"></el-table-column>
            <el-table-column prop="title" label="专辑标题"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" on-text="正常" off-text="禁用" :on-value=0 :off-value=1 @change="swithStatus(scope.row)"></el-switch>
                </template>
            </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
            <el-button style="margin-bottom: 10px; "@click="toggleSelection(tableData)">反选</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
            <el-button type="primary" @click="getStorage">采集入库</el-button>
        </el-col>

        <el-dialog title="新增采集" v-model="addFormVisible" :close-on-click-modal="false" top="5%">
            <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
                <el-form-item label="专辑标题" prop="title">
                    <el-input v-model="addForm.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="专辑ID" prop="albumId">
                    <el-input v-model="addForm.albumId" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="专辑状态">
                    <el-switch v-model="addForm.status" on-text="正常" off-text="禁用" :on-value=0 :off-value=1 ></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addSubmit('addForm')" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import {gatherAdd,gatherList,gatherStorage,gatherUpdate} from '../../api/api';
    export default {
        data() {
            return {
                tableData: [],
                multipleSelection: [],
                listLoading: false,
                ActData:{},
                addFormVisible: false,
                addLoading: false,
                limitTwo: true,
                addFormRules: {
                    title: {required: true, message: '请输入专辑标题', trigger: 'blur'},
                    albumId: {required: true, message: '请输入专辑ID', trigger: 'blur'},
                },
                /*新增界面数据*/
                addForm: {
                    title: '',
                    albumId: '',
                    status: 0
                },
            }
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            getActivity() {
                let para = {};
                this.listLoading = true;
                gatherList(para).then((res) => {
                    this.listLoading = false;
                    let {code, data} = res;
                    if (code !== 20000) {
                        this.$message({message: res.message, type: 'error'});
                    } else {
                        this.tableData = data;
                    }
                });
            },
            getAdd(){
                this.addFormVisible = true;
                this.addForm = {
                    title: '',
                    albumId: '',
                    status: 0
                };
            },
            addSubmit(a){
                this.$refs[a].validate((valid) => {
                    if (valid){
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            let para = this.addForm;
                            gatherAdd(para).then((res) => {
                                this.addLoading = false;
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                });
                                this.addFormVisible = false;
                                this.getActivity();
                            });
                        });
                    }
                });
            },
            getStorage(){
                if(this.multipleSelection.length<=0){this.$message({message: '请选择一个或者多个', type: 'error'});return;}
                this.$confirm('确认要采集？', '提示', {}).then(() => {
                    this.addLoading = true;
                    let para = {
                        albumIds: ''
                    };
                    for(let i = 0; i < this.multipleSelection.length; i++){
                        if(i===0){
                            para.albumIds = this.multipleSelection[i].albumId + '';
                        }else{
                            para.albumIds = para.albumIds + ',' +this.multipleSelection[i].albumId;
                        }
                    }
                    gatherStorage(para).then((res) => {
                        this.addLoading = false;
                        this.$message({message: res.message, type: 'success'});
                        this.addFormVisible = false;
                        this.getActivity();
                    });
                });
            },
            swithStatus(fall){
                this.addLoading = true;
                gatherUpdate(fall).then((res) => {
                    this.addLoading = false;
                    this.$message({message: res.message, type: 'success'});
                    this.addFormVisible = false;
                    this.getActivity();
                });
            }
        },
        mounted(){
            this.getActivity();
        },
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #gather{}
</style>